<template>
    <div class="flex-center cell-wrapper" v-if="getShow()" :class="action ? '' : 'mr20'">
        <!-- <span class="key" v-if="column.title && !action">{{ column.title }}：</span> -->
        <template v-if="showTooltip(column,item) && !action">
            <Tooltip
                :key="column.key"
                :max-width="column.width < 200 ?  400 : Math.min(column.width* 2,800)"
                transfer
                placement="top-start"
                class="ivu-table-cell-tooltip"
                :class="column.render ? 'tooltip-render' : ''"
                :disabled="column.render || column.tooltipKey  ? false : !showTooltipContent"
            >
                <card-render
                    @mouseenter="(e) => {return handleTooltipIn(e,column.type)}"
                    @mouseleave="handleTooltipOut"
                    :render="column.renderFun"
                    :index="index"
                    :row="item"
                    :column="column"
                    :getCellContent="getContent"
                >
                </card-render>
                <template slot="content">
                    <card-render
                        showType="content"
                        :render="column.renderFun"
                        :index="index"
                        :row="item"
                        :column="column"
                        :getCellContent="getContent"
                    >
                    </card-render>
                </template>
            </Tooltip>
        </template>
        <template v-else>
            <Action v-if="action && column.opList" :column="column" :row="item"></Action>
            <card-render
                v-if="!(action && !column.render)"
                :render="column.renderFun"
                :index="index"
                :row="item"
                :column="column"
                :key="column.key"
                :getCellContent="getContent"
            >
            </card-render>
        </template>
    </div>
</template>
<script>
    import CardRender from './cardRender';
    import Action from './action.vue'
    export default {
        name:'CardItem',
        components:{CardRender,Action},
        props:{
            column:{
                type: Object,
                default:() => {}
            },
            item:{
                type: Object,
                default:() => {}
            },
            index:{
                type:Number,
                default:1
            },
            action:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                showTooltipContent:false
            }
        },
        methods:{
            getContent(column,item) {
                let value = column.filter ? column.filter(item[column.key], item) : item[column.key]
                return value || value === 0 ? value : '-'
            },
            showTooltip(column,item) {
                return (column.tooltip || column.type === 'Html') && (this.getContent(column,item) != '-' || column.render);
            },
            handleTooltipIn(e,type) {
                const $content = e.target; //this.$refs.content;
                this.showTooltipContent = type === 'Html' ? true : $content.scrollWidth > $content.offsetWidth;
            },
            handleTooltipOut(e){

            },
            getShow() {
                return typeof this.column.show === 'function'
                    ? this.column.show(this.item)
                    : this.column.show !== false
                    ? true
                    : false;
            }
        }
    }
</script>
<style scoped>
    .key{
        flex:none;
    }
    .pre-wrap {
        white-space: pre-wrap;
    }
    .pre{
        white-space: pre;
    }
    .pre:not(.ivu-tag){
        max-height: 1.5em;
    }
    .blue-color{
        color:var(--url-color) !important;
    }
    .pointer{
        cursor: pointer!important;
    }
    .cell-wrapper .text-ellipsis:not(.ivu-tag) {
        word-break: normal;
        display: block;
        width: 100%;
    }
</style>